<template>
  <div class="invitemanage page">
    <van-nav-bar
        title="推广管理"
        left-arrow
    >
      <template #right>
        <i class="van-badge__wrapper van-icon van-icon-plus right-icon" style="font-size: 18px;"></i>
      </template>
    </van-nav-bar>
    <div class="main">
      <div class="title"><p>邀请码</p>
        <p>邀请码状态</p>
        <p>操作</p></div>
      <div class="content">
        <div class="item van-hairline--bottom">
          <div class="invitecode">402142230</div>
          <div class="invitestate isTrue">启用</div>
          <van-button class="btnEdit" text="编辑" />
        </div>
        <div class="item van-hairline--bottom">
          <div class="invitecode">402142230</div>
          <div class="invitestate isFalse">禁用</div>
          <van-button class="btnEdit" text="编辑" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Invite",
  data: function () {
    return {}
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

.invitedetails {
  padding-top: .4rem;
  background-color: #fcf0fa
}

.invitedetails .detailitem {
  padding: .32rem;
  color: #000;
  font-size: .32rem;
  display: flex;
  flex-direction: row;
  align-items: center
}

.invitedetails .detailitem .label {
  color: #979799;
  width: 33.33333%
}

.invitedetails .detailitem .invatecode {
  width: 33.33333%
}

.invitedetails .detailitem .operator {
  width: 33.33333%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end
}

.invitedetails .detailitem .operator .copy {
  border-radius: .08rem;
  border: .02667rem solid #11c64d;
  color: #fff;
  background-color: #11c64d
}

.invitedetails .buttons {
  margin: .53333rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between
}

.invitedetails .buttons .btnClose,.invitedetails .buttons .btnDelete {
  width: 45%;
  background-color: #fff;
  height: 1.06667rem;
  border-radius: 1.06667rem;
  outline: 0
}

.invitedetails .buttons .btnDelete {
  border: .02667rem solid #fa59b5;
  color: #fa59b5;
  background-color: #fcf0fa
}

.invitedetails .buttons .btnClose {
  border: .02667rem solid #e38afb;
  color: #e38afb;
  background-color: #fff
}

.invitemanage {
  background-color: #f0f0f0;
  height: 100%
}

.invitemanage .van-nav-bar {
  background: linear-gradient(90deg,#fff,#fff)
}

.invitemanage .van-nav-bar .right-icon {
  color: #e38afb;
  font-size: .53333rem!important;
  font-weight: 700
}

.invitemanage .main {
  background-color: #fcf0fa
}

.invitemanage .main .title {
  padding: .32rem 0;
  display: flex;
  height: 1.06667rem;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  font-size: .37333rem;
  color: #fff;
  background-color: #fa59b5
}

.invitemanage .main .content {
  height: calc(100vh - 2.64rem);
  overflow: auto
}

.invitemanage .main .content .item {
  padding: .4rem .4rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: .32rem;
  text-align: left;
  color: #000;
  background-color: #f5dcf1
}

.invitemanage .main .content .item .isTrue {
  color: #2ec210
}

.invitemanage .main .content .item .isFalse {
  color: #979799
}

.invitemanage .main .content .item .btnEdit {
  background-color: #2ec210;
  height: .85333rem;
  border: 0;
  color: #fff;
  border-radius: .13333rem
}

.invitemanage .main .content .item .agentpoint,.invitemanage .main .content .item .invitecode,.invitemanage .main .content .item .invitestate {
  flex: 1
}

</style>
